<!-- 首页 -->
<template>
  <div>
    <!-- 导航 -->
    <div class="nav w100">
      <div class="w1230 auto h40 flex between nav_center">
        <div class="flex nav_center_left h40 fs12 between">
            <div>小米官网</div>
            <div>小米商城</div>
            <div>MIUI</div>
            <div>loT</div>
            <div>云服务</div>
            <div>天星数科</div>
            <div>有品</div>
            <div>小爱开放平台</div>
            <div>资质证照</div>
            <div>协议规则</div>
            <div>下载app</div>
            <div>Select Location</div>
        </div>
        <div class="flex nav_center_right between fs12 text-center">
          <div>请登录</div>
          <div>消息通知</div>
          <div>我的订单</div>
          <div :style="{'background': shoppingCartNum ==0 ? '#999' : '#ff6700'}">购物车（{{shoppingCartNum}}）</div>
          <!-- 
            给 div设置样式 可以用 style

            style需要设置成动态的  style前面加个:  就可以动态设置了

            <div :style=""></div>

            要设置背景颜色
            <div :style="{'backround': 要设置的值}"></div>

            <div :style="{'backround': 'red'}"></div>
            <div :style="{'backround': 'blue'}"></div>


            要设置的值 有两个  

            三目运算符   a?b:c   如果a是true  取b的值   a是false  取c的值
            shoppingCartNum == 0 ? 灰色 : 橙色


             <div :style="{'backround': shoppingCartNum == 0 ? 灰色 : 橙色}"></div>
             <div :style="{'backround': shoppingCartNum == 0 ? '#999' : '#ff6700'}"></div>
           -->
        </div>
      </div>
    </div>

    <!-- 菜单 -->
    <Menu></Menu>

    <!-- 轮播图 -->
    <Banner></Banner>

    <!-- 快捷通道 -->
    <div class="w1230 auto flex between mt15">
      <img src="@/assets/1.png"/>
      <img width="317" src="@/assets/x1.jpeg"/>
      <img width="317" src="@/assets/x2.jpg"/>
      <img width="317" src="@/assets/x3.png"/>
    </div>

    <!-- 商品主体 -->
    <div class="main mt20">
      <div class="w1230 auto">
        <img width="100%" class="mt20 mb20" src="@/assets/m1.webp"/>
        <!-- 商品组件 -->
        <GoodsModule title="手机" :data="phoneData" :img="[require('@/assets/g1.webp')]"></GoodsModule>

        <!-- <GoodsModule 
          title="智能穿戴" 
          :img="[require('@/assets/g2.webp')]" 
          :data="phoneData"
          :list="['耳机','穿戴']"
          :more="'耳机'"
        ></GoodsModule>

        <GoodsModule 
          title="笔记本 | 平板" 
          :img="[require('@/assets/g3.webp'),require('@/assets/g4.webp')]" 
          :list="['电暖气','扫地机','空气','清洁']"
          :more="'热门'"
        ></GoodsModule> -->


        <img width="100%" class="mt20 mb20" src="@/assets/m2.webp"/>
      </div>
    </div>
  </div>
</template>

<script>
import Menu from '@/components/home/com-menu.vue'  // 引入组件
import Banner from '@/components/home/com-banner.vue'  // 引入组件
import GoodsModule from '@/components/home/com-goods-module.vue'

import axios from 'axios'

// 文件名称 PageHome  page-home


//18534631949
// axios

// import 引入语句

// 跨域了  https://taobao.com
// localhost:8080

// http://localhost:3000

export default {
  data () { // 数据
    return {
      shoppingCartNum: 2,
      phoneData: []
    }
  },
  components: { // 组件
    Menu,
    Banner,
    GoodsModule
  },
  mounted () {
    axios.get('/api/phone').then(({data}) => {
      console.log(data)
      this.phoneData = data
    })
  }
}
</script>

<style scoped lang="less">
.main{
  background: #f5f5f5;
}
.nav{
  height: 40px;
  background: #333;
  .nav_center{
    color: #e5e5e5;
    .nav_center_left{
      width: 750px;
      line-height: 40px;
    }
    .nav_center_right{
      line-height: 40px;
      width:400px;
      div{
        width: 100px;
      }
    }
  }
}
.h40{
  height: 40px;
}
</style>